<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页--顶看后台管理模板</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<META    HTTP-EQUIV="Pragma" CONTENT="no-cache">
	<META    HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
	<META    HTTP-EQUIV="Expires" CONTENT="0">
	<link rel="stylesheet" href="../public/vendor/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../public/static/css/public.css" media="all" />
	<!-- <link rel="stylesheet" href="../public/static/css/admin.css" media="all" /> -->
	<script type="text/javascript" src="../public/vendor/layui/layui.js"></script>
	<script type="text/javascript" src="../public/static/js/main.js"></script>
</head>
<style type="text/css">
/* 快捷方式 */
.dingkantpl-backlog .dingkantpl-backlog-body{display:block;padding:10px 15px;background-color:#f8f8f8;color:#999;border-radius:2px;transition:all .3s;-webkit-transition:all .3s}
.dingkantpl-backlog-body h3{padding-bottom:10px;font-size:12px}
.dingkantpl-backlog-body p cite{font-style:normal;font-size:30px;font-weight:300;color:#009688}
.dingkantpl-backlog-body:hover{background-color:#f2f2f2;color:#888}

/* 待办事项 */
.dingkantpl-shortcut li{text-align:center}
.dingkantpl-shortcut li .layui-icon{display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s}
.dingkantpl-shortcut li cite{position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}
.dingkantpl-shortcut li:hover .layui-icon{background-color:#f2f2f2}

/* 动态 */
.dingkantpl-carousel{height:185px!important;background-color:#fff}
.dingkantpl-carousel .layui-carousel-ind li{background-color:#e2e2e2}
.dingkantpl-carousel .layui-carousel-ind li:hover{background-color:#c2c2c2}
.dingkantpl-carousel .layui-carousel-ind li.layui-this{background-color:#999}
.dingkantpl-carousel .layui-carousel,.dingkantpl-carousel>[carousel-item]>*{background-color:#fff}
.dingkantpl-carousel .layui-col-space10{margin:0}
.dingkantpl-carousel .layui-carousel-ind{position:absolute;top:-41px;text-align:right}
.dingkantpl-carousel .layui-carousel-ind ul{background:0 0}
.dingkantpl-news{height:60px!important;padding:0 0}
.dingkantpl-news a{display:block;line-height:60px;text-align:center}
.dingkantpl-news .layui-carousel-ind{height:45px}
</style>
<body class="childrenBody">
	<!-- <blockquote class="layui-elem-quote layui-bg-green">
		<div id="nowTime"></div>
	</blockquote> -->
		<blockquote class="layui-elem-quote quoteBox">
		
			<div class="layui-inline">
				用最多的思考写更少的代码，用最少的代码做更多计算。———顶看（dingkan.net）
			</div>
		
	</blockquote>
	
	<div class="layui-tab layui-tab-brief tabBox layui-card"  style="border:1px solid #e6e6e6;">
		  <ul class="layui-tab-title" style="padding-left:10px;">
		    <li class="layui-this">桌面</li>
		    <li>开发团队</li>
		    <li>使用前必读</li>
		    <li>免责声明</li>
		    <li>系统信息</li>
		  </ul>
		  <div class="layui-tab-content" style="height: auto;" >
		    <div class="layui-tab-item layui-show">
				<div class="layui-fluid">
					<div class="layui-row layui-col-space15">
						<div class="layui-col-md8">
					        <div class="layui-row layui-col-space15">
					          <div class="layui-col-md6">
					            <div class="layui-card" style="border:1px solid #e6e6e6">
					              <div class="layui-card-header">快捷方式</div>
					              <div class="layui-card-body">
					                
					                <div class="layui-carousel dingkantpl-carousel dingkantpl-shortcut">
					                  <div>
					                    <ul class="layui-row layui-col-space10">
					                      <li class="layui-col-xs3">
					                        <a lay-href="home/homepage1.html">
					                          <i class="layui-icon layui-icon-console"></i>
					                          <cite>主页一</cite>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs3">
					                        <a lay-href="home/homepage2.html">
					                          <i class="layui-icon layui-icon-chart"></i>
					                          <cite>主页二</cite>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs3">
					                        <a lay-href="component/layer/list.html">
					                          <i class="layui-icon layui-icon-template-1"></i>
					                          <cite>弹层</cite>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs3">
					                        <a dingkantpl-event="im">
					                          <i class="layui-icon layui-icon-chat"></i>
					                          <cite>聊天</cite>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs3">
					                        <a lay-href="component/progress/index.html">
					                          <i class="layui-icon layui-icon-find-fill"></i>
					                          <cite>进度条</cite>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs3">
					                        <a lay-href="app/workorder/list.html">
					                          <i class="layui-icon layui-icon-survey"></i>
					                          <cite>工单</cite>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs3">
					                        <a lay-href="user/user/list.html">
					                          <i class="layui-icon layui-icon-user"></i>
					                          <cite>用户</cite>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs3">
					                        <a lay-href="set/system/website.html">
					                          <i class="layui-icon layui-icon-set"></i>
					                          <cite>设置</cite>
					                        </a>
					                      </li>
					                    </ul>
					                    
					                  </div>
					                    <div id="quick" class="layui-carousel-ind">
							            	<ul>
							            		<li class=""></li>
							            		<li class=""></li>
							            		<li class="layui-this"></li>
							            	</ul>
						            	</div>
					                </div>

					                
					              </div>
					            </div>
					          </div>
					          <div class="layui-col-md6">
					            <div class="layui-card" style="border:1px solid #e6e6e6">
					              <div class="layui-card-header">待办事项</div>

					              <div class="layui-card-body">

					                <div class="layui-carousel dingkantpl-carousel dingkantpl-backlog">
					                  <div>
					                    <ul class="layui-row layui-col-space10">
					                      <li class="layui-col-xs6">
					                        <a lay-href="app/content/comment.html" class="dingkantpl-backlog-body">
					                          <h3>待审评论</h3>
					                          <p><cite>66</cite></p>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs6">
					                        <a lay-href="app/forum/list.html" class="dingkantpl-backlog-body">
					                          <h3>待审帖子</h3>
					                          <p><cite>12</cite></p>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs6">
					                        <a lay-href="template/goodslist.html" class="dingkantpl-backlog-body">
					                          <h3>待审商品</h3>
					                          <p><cite>99</cite></p>
					                        </a>
					                      </li>
					                      <li class="layui-col-xs6">
					                        <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});" class="dingkantpl-backlog-body">
					                          <h3>待发货</h3>
					                          <p><cite>20</cite></p>
					                        </a>
					                      </li>
					                    </ul>
					                  </div>
					                    <div id="to-do" class="layui-carousel-ind">
							            	<ul>
							            		<li class=""></li>
							            		<li class=""></li>
							            		<li class="layui-this"></li>
							            	</ul>
						            	</div>	
					                </div>
					              </div>


					            </div>
					          </div>
					        </div>
							<div class="layui-col-md12 magt15">
					            <div class="layui-card" style="border:1px solid #e6e6e6">
					              <div class="layui-card-header">热门话题</div>
					              <div class="layui-card-body">
					              	<table class="layui-hide" id="topic" lay-filter="test"></table>
 
									<!-- <script type="text/html" id="barDemo">
									  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
									  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
									  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
									</script> -->
					              </div>
					            </div>
					        </div>
							<div class="layui-col-md12 magt15">
							<div class="layui-card"  style="border:1px solid #e6e6e6">
						          <div class="layui-card-header">最新动态</div>
						          <div class="layui-card-body">
						            <div id="news" class="layui-carousel dingkantpl-carousel dingkantpl-news" lay-filter="news" lay-anim="fade" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
						              <div id="sports" carousel-item="">
						                <div class=""><a href="#" target="_blank" class="layui-bg-red">AdminTpl 快速上手文档</a></div>
						                <div class=""><a href="#" target="_blank" class="layui-bg-green">上次登录时间: <span class="loginTime"></span></a></div> 
						                <div class="layui-this"><a href="#" target="_blank" class="layui-bg-blue">本源码为个人业余学习整理所得，仅做学习用，采用时请注意许可。</a></div>
						              </div>
						            </div>
						          </div>
						     </div>
						     </div>

				        </div>
					

						<div class="layui-col-md4">
							<div class="layui-card" style="border:1px solid #e6e6e6">
					          <div class="layui-card-header">版本信息</div>
					          <div class="layui-card-body layui-text">
					            <table class="layui-table">
								  <colgroup>
								    <col width="100">
								    <col>
								  </colgroup>
								  <tbody>
								    <tr>
								      <td>当前版本</td>
								      <td> DingkanTpl v1.0.0 <a href="" target="_blank" style="padding-left: 15px;">更新日志</a> 
								      </td>
								    </tr>
								    <tr>
								      <td>基于框架</td>
								      <td id="layui-v">
										layui v2.5.6
								      </td>
								    </tr>
								    <tr>
								      <td>主要特色</td>
								      <td>动态TAB / 开箱即用</td>
								    </tr>
								    <tr>
								      <td>获取渠道</td>
								      <td style="padding-bottom: 0;">
								        <div class="layui-btn-container">
								          <a href="#" target="_blank" class="layui-btn layui-btn-danger">获取授权</a>
								          <a href="#" target="_blank" class="layui-btn">立即下载</a>
								        </div>
								      </td>
								    </tr>
								  </tbody>
								</table>
					          </div>
					        </div>

					        <div class="layui-card" style="border:1px solid #e6e6e6">
					          <div class="layui-card-header">更新日志</div>
					          <div class="layui-card-body layui-text">
								 <div class="layui-elem-quote layui-quote-nm history_box magb0">
				<ul class="layui-timeline">
				<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<div class="layui-timeline-title">
								<h3 class="layui-inline">DingkanTpl v1.0　</h3>
								<span class="layui-badge-rim">2020-01-30</span>
							</div>
							<ul><li>项目更名为 DingkanTpl（项目命名还未稳定，随时有重新命名的可能，请理解！	）；</li>
								<li>增加Tab左右移动功能</li>
								<li>修复已知BUG</li>
							</ul>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<div class="layui-timeline-title">
								<h3 class="layui-inline">NiceTpl v1.0　</h3>
								<span class="layui-badge-rim">2019-03-31</span>
							</div>
							<ul><li>AdminTpl 更名为 NiceTpl（项目命名还未稳定，随时有重新命名的可能，请理解！	）；</li>
								<li>首页“最新动态”轮播按钮增加鼠标经过激活事件；</li>
								<li>首页“快捷方式”及“待办事项”容器右上角预增加翻页原点图标；</li>
								<li>AdminTpl重构首页！</li>
								<li>优化部分CSS！</li>
							</ul>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<div class="layui-timeline-title">
								<h3 class="layui-inline">AdminTpl v1.0　</h3>
								<span class="layui-badge-rim">2019-03-11</span>
							</div>
							<ul>
								<li>AdminTpl项目建设中，期待发布！</li>
							</ul>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<div class="layui-timeline-title">
								<h3 class="layui-inline">AdminTpl项目成立！</h3>
								<span class="layui-badge-rim">2019-03-11</span>
							</div>
							<ul>
								<li># AdminTpl</li>
								<li>1.AdminTp模板基于Layui开发</li>
								<li>2.AdminTp参考了很多很多开源项目</a></li>								
							</ul>
						</div>
					</li>
				</ul>
				</div>

					          </div>
					        </div>
						</div>
					</div>	
				</div>					
			</div>

				<div class="layui-tab-item">2</div>
			    <div class="layui-tab-item">3</div>
			    <div class="layui-tab-item">4</div>
			    <!-- 系统基本参数 -->
			    <div class="layui-tab-item">
					<blockquote class="layui-elem-quote title">系统基本参数</blockquote>
						<table class="layui-table magt0">
							<colgroup>
								<col width="150">
								<col>
							</colgroup>
							<tbody>
							<tr>
								<td>当前版本</td>
								<td class="version"></td>
							</tr>
							<tr>
								<td>开发作者</td>
								<td class="author"></td>
							</tr>
							<tr>
								<td>网站首页</td>
								<td class="homePage"></td>
							</tr>
							<tr>
								<td>服务器环境</td>
								<td class="server"></td>
							</tr>
							<tr>
								<td>数据库版本</td>
								<td class="dataBase"></td>
							</tr>
							<tr>
								<td>服务器域名/IP</td>
								<td class="domainIp"></td>
							</tr>
							<tr>
								<td>最大上传限制</td>
								<td class="maxUpload"></td>
							</tr>
							<tr>
								<td>当前用户权限</td>
								<td class="userRights"></td>
							</tr>
							</tbody>
						</table>
			    </div>
		    </div>
		    
		    
		  </div>
	</div>

	<blockquote class="layui-elem-quote main_btn" id="footer">
		<p>提别声明：</p>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.DingkanTpl 所有数据均为静态数据，无数据库，关闭窗口、刷新或清除缓存后，所有操作无效。DingkanTpl 是个人业余学习之果（笔记），参考了网络上大量的开源项目，请各位知晓，同时也在此一并感谢为开源项目一直默默奉献的您，谢谢。DingkanTpl 目前仅供学习研究之用，切勿用于商业用途。<span style="color:red">无论你是否全部使用 DingkanTpl，凡因下载/使用 DingkanTpl 所引起的一切责任，概有下载/使用者负责。</span></p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.请将项目部署到Web应用服务器下再进行访问【建议通过tomcat、phpstudy等方式运行，不建议通过iis方式运行】，否则部分数据将无法显示!</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.因本人能力有限，部分BUG暂时无力修复，请各位高手多多指教!</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.本系统中的所有内容（包括但不限于文字、图片等）均有版权限制，采用请注意许可。商业网站或未授权媒体不得复制本软件代码或本站内容。</p>
		<p class="layui-blue">PS：这只是模版而不是定制开发，不能覆盖升级很正常，请不要因为不能覆盖升级来喷我，我表示很无辜，谢谢大家</p>
	</blockquote>
	

	


<script>
layui.config({
  version: '1551352891258' //为了更新 js 缓存，可忽略
});



 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  
   
  //向世界问个好
  layer.msg('嗨！欢迎回来！');
    //快捷方式
    $("#quick ul li").hover(function(){
    	$("#quick ul li").removeClass('layui-this');
    	$(this).addClass('layui-this');
    	//临时提示
    	layer.tips('该功能正在开发中！','#quick ul', {
  			tips: [3, '#3595CC'],
		});

    /*
		//获取当前元素的序号
		var number = $(".btnCarousel ul li").index(this);
		$(".btnCarousel ul li").removeClass('layui-this');
		$("#sports div").removeClass('layui-this');
		$(this).addClass('layui-this');		
	    //给相同序号的轮播内容添加CSS
	    $("#sports div").eq(number).addClass('layui-this');*/
	});
	//代办事项
    $("#to-do ul li").hover(function(){
    	$("#to-do ul li").removeClass('layui-this');
    	$(this).addClass('layui-this');
    	//临时提示
    	layer.tips('该功能正在开发中！','#to-do ul', {
  			tips: [3, '#3595CC'],
		});
	});

  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });
  
  //热门话题
  table.render({
    elem: '#topic'
    ,height: 280
    ,url: '../public/json/topic.json' //数据接口
    ,title: '热门话题表'
    ,page: true //开启分页
    ,toolbar: 0 //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: 0 //开启合计行
    ,cols: [[ //表头
      {field: 'id', title: '序号', width:80, align:'center', sort: true, fixed: 'left'}
      ,{field: 'topicname', title: '标题', width:380}
      ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
      ,{field: 'author', title: '作者', width:80}
      ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
      ,{field: 'city', title: '城市', width:150}
      ,{field: 'classify', title: '职业', width: 100}
      ,{field: 'wealth', title: '浏览量', width: 135, sort: true, totalRow: true}
      ,{field: 'releasetime', title: '发布时间', width: 120, align:'center', sort: true, totalRow: true, fixed: 'right'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.msg('添加');
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){
      layer.msg('编辑操作');
    }
  });
  
  //执行一个轮播实例
  carousel.render({
    elem: '#news'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
  });
  	//轮播按钮添加临时空类
  	$(function () { 
		$('#sports').next().addClass('btnCarousel');
	});
 	//轮播内容鼠标经过事件
	$(".btnCarousel ul li").hover(function(){
		//获取当前元素的序号
		var number = $(".btnCarousel ul li").index(this);
		$(".btnCarousel ul li").removeClass('layui-this');
		$("#sports div").removeClass('layui-this');
		$(this).addClass('layui-this');		
	    //给相同序号的轮播内容添加CSS
	    $("#sports div").eq(number).addClass('layui-this');
	})

  //将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      '0-10-14': '生日'
      ,'2018-08-28': '新版'
      ,'2018-10-08': '神秘'
    } 
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint('一不小心就月底了呢');
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });
  
  //上传
  upload.render({
    elem: '#uploadDemo'
    ,url: '' //上传接口
    ,done: function(res){
      console.log(res)
    }
  });
  
  slider.render({
    elem: '#sliderDemo'
    ,input: true //输入框
  });
  
  //底部信息
  var footerTpl = lay('#layuiv')[0].innerHTML;
  lay('#layuiv').html(layui.laytpl(footerTpl).render({}))
  .removeClass('layui-hide');
});
</script>
</body>
</html>